<template>
  <el-submenu v-if="item.childList && item.childList.length"  :index="item.router" class="childSubMenu">
    <!-- 创建父级菜单 -->
    <template slot="title"><i :class="[item.icon]"></i><span slot="title">{{item.name}}</span></template>
    <!-- 创建子菜单 -->
    <nav-item v-for="subItem of item.childList" :key="subItem.id" :item="subItem" ></nav-item>
  </el-submenu>
  <el-menu-item v-else 
      :key="item.id" 
      :index="item.router" 
      @click="setNavName(item)" 
      :route="{name:item.router}" 
      class="flex-centet-between">
      <span>{{item.name}}</span>
      <i class="fs20 icon" 
      :class="[item.isCollect==true?'el-icon-star-on':'el-icon-star-off']" 
      style="color:#ffd04b" @click.stop="collection(item)"></i>
 </el-menu-item>
</template>

<style scoped>
  .el-menu li {
    list-style: none;
    border-top: 1px solid #000;
  }

  .el-submenu .el-menu-item {
   border-top: 0px solid #000;
  }

  .el-submenu .el-menu-item:hover{
    background: rgba(24,144,255,0.5)!important;
  }

  .el-submenu .el-menu-item {
    height: 40px!important;
    line-height: 40px!important;
  }
  .flex-centet-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .flex-centet-between .icon {
    vertical-align: middle;
    margin-right: 0px;
    width: 20px;
    font-size: 16px;
  }
 
  .el-submenu .el-menu-item:hover{
    background: rgba(24,144,255,0.5)!important;
  }
  .is-active {
    background: #1890ff!important;
  }
  .is-active:hover{
    background: #1890ff!important;
  }
</style>

<script>
import  server from '@/service/index_c'
import {setCookie} from '@/base/utils'
  export  default {
    name:'navItem',
    props:{
      item:{
        type:Object,
        default:{}
      }
    },
    methods:{

      setNavName(item){
        this.$store.dispatch('setNavName',item);
        setCookie('navName',item)
      },

      //收藏菜单
     async collection( item ) {
       if(item.isCollect){
         return;
       }
        let result = await  server.haiheiServerCollectMenu( {
          menuId: item.id
        } );
        if ( result.success ) {
          item.isCollect = true;
          console.log(item)
          this.$store.dispatch('setMenuItem',item)
        }
      }
    }

  }



</script>
